<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 深拷贝 ： deepcopy
        // 一.为什么需要深拷贝 ？
        //1.简单数据类型  ， 基本数据类型
        //  number string  boolean  undefined null Symbol bigInt

        // 2. 复杂数据类型
        // 数组 、对象 、函数 、正则 ....

        // 复杂数据类型会造成数据引用问题 
        // var obj1 = {
        //     myname:"张三",
        //     age:20
        // }

        // var obj2 = obj1;
        // obj2.age = 30;
        // console.log(obj1);  

        // var arr = [1,2,3,4];
        // var arr2 = arr;
        // arr2[1] = "hello";
        // console.log(arr);

        // 复杂数据类型简单的赋值操作  内存空间是一个 浅拷贝。浅拷贝会互相影响


        // 二.深拷贝 ，2个对象或者数组间 都不会造成引用问题 。
        // 如何深拷贝 
        // 方式一： json 深拷贝 
        // json深拷贝会有缺陷 ： 会忽略一些数据类型 ：1. function 2. undefined 。3 set 4 map  5 symbol
        // var obj1 = {
        //     name:"张三",
        //     age:20,
        //     fn:function(){
        //         console.log("fn");
        //     },
        //     n:null,
        //     u:undefined
        // }
        // console.log("obj1",obj1);
        // // var obj2 = obj1; // 简单赋值 
        // var obj2 = JSON.parse(JSON.stringify(obj1));
        // console.log("obj2",obj2);

        // obj2.age = 30;
        // console.log(obj1);


        // 方式二 ： 递归深拷贝 

        var obj1 = {
            name: "张三",
            age: 20,
            hobby:{
                one:"篮球"
            }
        }
        // console.log("obj1",obj1);


        // 初版的深拷贝 1.数组的拷贝??? 2. 对象的多层问题 ???
        function deepcopy(obj1) {
            var obj2 = {};
            for (var key in obj1) {
                obj2[key] = obj1[key];
            }
            return obj2;
        }
        var obj2 = deepcopy(obj1);

        // console.log("obj2",obj2);
        // obj2.age = 30;
        // console.log(obj1);
        obj2.hobby.one = "足球";
        console.log(obj1);
    </script>
</body>

</html>